<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="todoList.css" />
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="container">
                <div class="logo">toDoList</div>
                <div class="input-area">
                    <!--  @click="add" 这里不要写add()了，因为我要的只是把函数体传进来-->
                    <input type="text" v-model="title" @keyup.enter="add"><button @click="add">添加</button>
                </div>
            </div>
        </div>
        <div class="container">
            <h2><span>正在进行</span> <span class="mask-num">{{undoneList.length}}</span></h2>
            <ul class="mask-list">
                <!-- 这里用todoList就相当于[{title:"吃饭",done: true},{title:"睡觉",done: false}]这两个数据， -->
                <li v-for="todo in undoneList" :key="todo.title">
                    <!-- v-model="todo.done"中，如果我一勾选，那么todo.done就会变成true,然后就实现了事件的改变 -->
                    <!-- 但是这样会有一个bug，勾选一个后，它下面的一个也会有一个被勾选的小勾勾，解决方式：加一个唯一的键 -->
                    <div><input type="checkbox" v-model="todo.done"/> <span>{{todo.title}}</span></div>
                    <!-- 这里实现的是如果computed中的todo.title如果跟todoList里面的title一样的话，就可以删除 -->
                    <button @click="del(todo.title)">删除</button>
                </li>
            </ul>
        </div>
        <div class="container">
            <h2><span>已经完成</span> <span class="mask-num">{{doneList.length}}</span></h2>
            <ul class="mask-list complete-list">
                <li v-for = "a in doneList" :key="a.title">
                    <div><input type="checkbox" v-model="a.done"/> <span>{{a.title}}</span></div>
                    <button @click="del(a.title)">删除</button>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>

    <script>
        var todoList = [{title:"吃饭",done: true},{title:"睡觉",done: false}]
        var vm = new Vue({
            el: "#app",
            data: {
                // 因为44行的todoList与这个同名，相当于todoList：todoList,简写形式 
               todoList,
               title: "" 
                

            },
            methods: {
                // 添加功能
                add(){
                    // 如果为空就直接退出
                    console.log(11);
                    if(this.title === ""){
                        return;
                    }
                    // 
                    this.todoList.unshift({title: this.title,done: false});
                    // 其实这个写不写都一样，因为v-model中的数据是实时更新的
                    this.title = "";
                },

                del(title){
                    //  先根据传进来的content查找，找到在数组中的索引，splice删除
                    //这里实现的是如果computed中的todo.title如果跟todoList里面的title一样的话，就可以删除 
                    //返回符合条件的下标
                    const index = this.todoList.findIndex(todo2 => todo2.title === title);
                    if(index === -1){
                        return
                    }
                    this.todoList.splice(index,1)

                }
               
            },
            computed: {
                // 一般写的是筛选的东西
                // 未完成列表
                // undoneList(),doneList()方法不能写成箭头函数，否则this不会指向vm
                undoneList(){
                    // return !todo.done  如果返回的是true就放在新数组中,相当于todo.done === false,
                    // todo.done还是为false,取反只是为了能为true能够返回
                    return this.todoList.filter((todo) =>{return !todo.done});
                },
                doneList(){
                    return this.todoList.filter((todo1) =>{return todo1.done});
                }
            }
            
        })
    </script>
</body>

</html>